import {
  Card,
  Image,
  Flex,
  Rate,
  Tag,
  Button,
  Selector,
  StickyPosition,
  Dialog,
  Grid,
  GridItem,
  Toast,
} from 'react-vant';
import { ShopO } from '@react-vant/icons';
import { sprite } from '@/utils/myinterface';
export default (props) => {
  /**
   * 切换精灵
   * @param index
   */
  const changeSprite = (index: number) => {
    Dialog.confirm({
      title: '是否要切换精灵',
      message: '如果切换精灵会耗费一回合，本次回合精灵不能发起攻击',
    })
      .then(() => {
        props.setCurSprite(props.spriteArry && props.spriteArry[index]);
        props.setOptionVal(['1']);
      })
      .catch(() => {
        props.setOptionVal(['1']);
      });
  };
  return (
    <>
      <Grid columnNum={5}>
        {!!props.spriteArry &&
          props.spriteArry.length > 0 &&
          props.spriteArry.map((i: sprite, index: number) => (
            <Grid.Item
              onClick={() => changeSprite(index)}
              key={index}
              icon={<ShopO />}
              text={i.name}
            />
          ))}
      </Grid>
    </>
  );
};
